//动态组件pinia模块
import TextComponent from '@/components/product/TextComponent.vue'
import { defineStore } from 'pinia'
import { computed, ref } from 'vue'

export const useDymicComponentStore = defineStore('dymicComponent', () => {
  const fileSmallImgList = ref([])

  // 默认富文本组件
  const displayContent = ref([
    {
      fileData: null,
      baseData: null,
      component: TextComponent,
      order: 0,
      type: 'text',
      value:null
    }
  ])

  //添加组件方法
  function addDymicComponent(data: any) {
    displayContent.value.push(data)
  }

  //计算displayContent的长度
  const length = computed(() => {
    return displayContent.value.length
  })

  //置顶方法
  function topping(index: number) {
    //将displayContent数组中order等于index的元素放到第一位,同时其他元素的oder+1
    displayContent.value.unshift(displayContent.value.splice(index, 1)[0])
    //TODO 后续需要添加调整其他元素order值的逻辑
  }
  //下移方法
  function moveDown(index: number) {
    displayContent.value[index].order = index + 1
    //将displayContent数组中order等于index的元素向后移动一位
    displayContent.value.splice(index + 1, 0, displayContent.value.splice(index, 1)[0])
  }
  //上移方法
  function moveUp(index: number) {
    //将displayContent数组中order等于index的元素向前移动一位
    displayContent.value[index].order = index - 1
    displayContent.value.splice(index - 1, 0, displayContent.value.splice(index, 1)[0])
  }
  //删除方法
  function remove(index: number) {
    //将displayContent数组中order等于index的元素删除
    displayContent.value.splice(index, 1)
  }

  return {
    fileSmallImgList,
    displayContent,
    length,
    addDymicComponent,
    topping,
    moveDown,
    moveUp,
    remove
  }
})
